<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>Datatable-中国地理位置详细信息</title>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>  
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>  
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>  
		<![endif]-->

		<!-- bootstrap-3.3.5 基本配置开始 -->
		<link rel="stylesheet" type="text/css" href="styles/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
		<!--bootstrap-3.3.5 基本配置结束-->
		
		<!--dataTables-1.10.11 bootstrap样式配置开始-->
		<link rel="stylesheet" type="text/css" href="styles/DataTables-1.10.11/media/css/dataTables.bootstrap.css" />
		<!--dataTables-1.10.11 bootstrap样式配置结束-->
		
		<!--dataTables 显示隐藏列与导出Excel配置开始-->
		<link rel="stylesheet" type="text/css" href="styles/DataTables-1.10.11/extensions/Buttons/css/buttons.bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="styles/DataTables-1.10.11/extensions/Buttons/css/buttons.dataTables.min.css">
		<!--dataTables 显示隐藏列与导出Excel配置结束-->
		
		<!--dataTables 固定列配置开始-->
		<link rel="stylesheet" type="text/css" href="styles/DataTables-1.10.11/extensions/FixedColumns/css/fixedColumns.bootstrap.min.css">
		<!--dataTables 固定列配置结束-->
		
		<!-- 对CSS的修复 开始 -->
		<style type="text/css" class="init">
			body{
				padding:5px;
			}
			table{
				font-size:11px;
			}
			th, td {
				white-space: nowrap;
				text-align:center; 
			}
			div.dataTables_wrapper {
		       width: 100%;
		       margin: 0 auto;
			}
			.ColVis_Button span{
				font-size:13px;
			}
			button.ColVis_Button {
				height: 32px;
				padding: 3px 8px;
			}
		</style>
		<!-- 对CSS的修复 结束 -->
	</head>
	<body>
		<form action="" method="post" name="selectForm" id="selectForm">
		
		</form>
		<div class="container">
			<h6>中国地理位置详细信息</h6>
			<!--
				<a href="styles/DataTables-1.10.11/examples">examples</a> | 
				<a href="styles/DataTables-1.10.11/extensions">extensions</a>
			-->
			<table id="example" class="table table-striped table-bordered">
				<thead>
					<tr>
						<th>序号</th>
						<th>名称</th>
						<th>短名称</th>
						<th>级别名称</th>
						<th>拼音名称</th>
						<th>级别</th>
						<th>邮政编码</th>
						<th>城市编码</th>
						<th>地区编码</th>
						<th>经度</th>
						<th>纬度</th>
						<!--<th>操作</th>-->
					</tr>
				</thead>
				<tbody></tbody>
				<!-- tbody是必须的 -->
			</table>
		</div>
	</body>
	
	<!--dataTables-1.10.11 基本配置开始-->
	<script src="styles/DataTables-1.10.11/media/js/jquery.js"></script>
	<script src="styles/DataTables-1.10.11/media/js/jquery.dataTables.min.js"></script>
	<!--dataTables-1.10.11 基本配置结束-->
	
	<!-- bootstrap-3.3.5 基本配置开始 -->
	<script src="styles/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	<!--bootstrap-3.3.5 基本配置结束-->
	
	<!--dataTables-1.10.11 bootstrap样式配置开始-->
	<script type="text/javascript" language="javascript" src="styles/DataTables-1.10.11/media/js/dataTables.bootstrap.js"></script>
	<!--dataTables-1.10.11 bootstrap样式配置结束-->
	
	<!--dataTables 显示隐藏列与导出Excel配置开始-->
	<script type="text/javascript" type="javascript" src="styles/DataTables-1.10.11/extensions/Buttons/js/buttons.bootstrap.min.js"></script>
	<script type="text/javascript" type="javascript" src="styles/DataTables-1.10.11/extensions/Buttons/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" type="javascript" src="styles/DataTables-1.10.11/extensions/Buttons/js/buttons.colVis.min.js"></script>
	<script type="text/javascript" type="javascript" src="styles/DataTables-1.10.11/extensions/Buttons/js/buttons.flash.min.js"></script>
	<!--dataTables 显示隐藏列与导出Excel配置结束-->
	
	<!--dataTables 固定列配置开始-->
	<script type="text/javascript" type="javascript" src="styles/DataTables-1.10.11/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"></script>
	<!--dataTables 固定列配置结束-->
	
	<script type="text/javascript">
		$(function() {
			var table = $('#example').DataTable({
				ajax : {
					url : "ChinaAreaData"
				},
				serverSide : true,
				columns : [ 
					{"data" : "id"}, 
					{"data" : "name"}, 
					{"data" : "short_name"}, 
					{"data" : "merger_name"}, 
					{"data" : "pinyin"},
					{"data" : "level"}, 
					{"data" : "zip_code"},
					{"data" : "city_code"},
					{"data" : "area_code"}, 
					{"data" : "lng"}, 
					{"data" : "lat"}
				],
				"scrollX": true,
				"scrollY": "380px",
				"paging": true,
				"pagingType": "full_numbers",
				fixedHeader: true,
				fixedColumns: true,
				fixedColumns:   {
		            leftColumns: 2
		        },
				"searching":true,
				"deferRender": true,
				pageLength: 25,
				dom: 'B<"toolbar">frtilp',
		        buttons: [
		            {
		                extend: 'colvis',
		                collectionLayout: 'fixed two-column',
		                postfixButtons: ['colvisRestore']
		            },
		            {
		                extend: 'colvisGroup',
		                text: '基本信息',
		                show: [ 0, 1, 2, 3, 4, 5],
		                hide: [ 6, 7, 8, 9, 10]
		            },
		            {
		                extend: 'colvisGroup',
		                text: '编码信息',
		                show: [ 0, 1, 2, 3, 4, 5, 6, 7, 8],
		                hide: [ 9, 10 ]
		            },
		            {
		                extend: 'colvisGroup',
		                text: '地理信息',
		                show: [ 0, 1, 2, 3, 4, 5, 9, 10 ],
		                hide: [ 6, 7, 8 ]
		            },
		            {
		                extend: 'colvisGroup',
		                text: '全部信息',
		                show: ':hidden'
		            }
		            /*,{
		                extend: 'excelFlash',
		                text: '导出Excel'
	            	}*/
		        ],
				"language":{
	                 "lengthMenu": "_MENU_ 条记录每页",
	                 "zeroRecords": "没有找到记录",
	                 "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
	                 "infoEmpty": "无记录",
	                 "infoFiltered": "(从 _MAX_ 条记录过滤)",
					 "search":"全 局 搜 索：",
					 "paginate": {
						"first":    "首页",
						"previous": "上一页",
						"next":     "下一页",
						"last":     "末页"
				   	},
				   	buttons: {
                		colvis: '显示隐藏列',
                		colvisRestore: '重置列'
            		}
		        }    
			});
			$("div.toolbar").html('<a class="dt-button buttons-collection buttons-colvis" tabindex="0" aria-controls="example" onclick="autoFromSubmit()"><span>导出Excel</span></a>');
		});
		function autoFromSubmit(){
		    $("#selectForm").attr("action","ExportApplyDataServlet.action");
		    $("#selectForm").attr("target","_blank");
		    $("#selectForm").submit();
		}
	</script>
</html>
